<template>
	<view class="page-image">
		<up-navbar placeholder bgColor="transparent">
			<template #left>
				<view />
			</template>
			<template #center>
				<view class="text-700-532">消息中心</view>
			</template>
		</up-navbar>
		<noticeBar></noticeBar>
		<view class="p-h24">
			<up-tabs :list="tabs" :activeStyle="activeStyle" lineColor="#3F77FB" />

			<view v-for="(item, index) in list" :key="index" class="card flex" @click="handleOpenItem(item)">
				<image class="cover" :src="item.images" mode="aspectFill" />

				<view class="flex-1 flex-d-lc m-l20">
					<view class="flex-sb w">
						<text class="text-700-130">{{ item.title }}</text>
						<text class="text-500-326">我的投递</text>
					</view>

					<view class="text m-t16">
						<view class="flex-sb">
							<text class="text-500-326">{{ item.fringe }}</text>
							<text class="text-500-326">{{ item.createtime }}</text>
						</view>
						<view class="btn">
							<text v-if="item.status == 1" class="text-500-326 checked">已接受</text>
							<text v-else class="text-500-326">待接受</text>
						</view>
					</view>
				</view>
			</view>
			<up-empty mode="list" text="暂无数据" v-if="!list.length"></up-empty>
		</view>
		<up-popup v-if="showPopup" :show="showPopup" mode="bottom" round="20rpx" closeable @close="showPopup = false">
			<BottomConfirm :id="uid" @close="showPopup = false" />
		</up-popup>
	</view>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import BottomConfirm from "./components/bottom-confirm";
const list = ref([]);
const uid = ref(0);
const showPopup = ref(false);

const activeStyle = {
	color: "#3F77FB",
	"font-size": "28rpx",
	"font-weight": "bold",
};

const tabs = reactive([{ name: "面试邀请" }]);
//打开
function handleOpenItem(item) {
	uni.navigateTo({ url: `/pages/interview/interview?id=${item.id}` });
	// if (item.status == 1) {
	// 	return uni.showToast({ title: "您已接受面试" });
	// }
	// uid.value = item.id;
	// showPopup.value = true;
}
//获取列表
async function getList() {
	const res = await uni.$u.get("/msg/lst");
	list.value = res.data;
}
onShow(() => {
	getList();
});
</script>

<style lang="scss" scoped>
.card {
	height: 174rpx;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eeeeee;

	.cover {
		width: 108rpx;
		height: 108rpx;
		border-radius: 10rpx;
	}

	.text {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;

		.btn {
			.checked {
				color: #1269ff;
			}
		}
	}
}
</style>
